import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  FlatList,
} from 'react-native';
import { useUpdate } from 'ahooks';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="ToDoList" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

function HomeScreen() {
  const [sectionList, setSectionList] = useState([]);
  const [value, setValue] = useState('');
  const [topText, setTopText] = useState('添加任务');
  const [editIndex, setEditIdex] = useState(null);
  const update = useUpdate();

  const handleAddText = () => {
    if (topText === '添加任务') {
      const data = sectionList;
      if (value) {
        data.push(value);
        setSectionList(data);
        setValue('');
        update();
      }
    } else {
      setTopText('添加任务');
      const data = sectionList;
      if (value) {
        data[editIndex] = value;
        setSectionList(data);
        setValue('');
        update();
      }
    }
  };

  const handleDelText = index => {
    const data = sectionList;
    if (data && data.length > 0) {
      data.splice(index, 1);
      setSectionList(data);
      update();
    }
  };

  const handleEditText = (item, index) => {
    console.log(item, index);
    setTopText('编辑任务');
    setEditIdex(index);
    setValue(item);
  };

  const renderItem = ({item, index}) => (
    <View style={styles.itemView}>
      <Text style={styles.subTitleView}>{item}</Text>
      <TouchableOpacity onPress={() => handleEditText(item, index)}>
        <Text style={styles.delTextView}>编辑</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => handleDelText(index)}>
        <Text style={styles.delTextView}>删除</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.container}>
      <View style={styles.addView}>
        <TextInput
          style={styles.inputView}
          onChangeText={text => setValue(text)}
          value={value}
          placeholder="请输入任务内容"
        />
        <TouchableOpacity onPress={handleAddText}>
          <Text style={styles.addTextView}>{topText}</Text>
        </TouchableOpacity>
      </View>
      {sectionList && sectionList.length > 0 && (
        <FlatList
          data={sectionList}
          renderItem={renderItem}
          keyExtractor={(item, index) => index}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  item: {
    padding: 6,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
  },
  title: {
    fontSize: 16,
  },
  addView: {
    display: 'flex',
    flexDirection: 'row',
    height: 30,
    textAlign: 'center',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  inputView: {
    width: 260,
    height: 30,
    borderColor: 'gray',
    borderWidth: 1,
  },
  addTextView: {
    height: 30,
    lineHeight: 30,
    textAlign: 'center',
    width: 80,
    backgroundColor: 'red',
  },
  itemView: {
    display: 'flex',
    flexDirection: 'row',
    textAlign: 'center',
    justifyContent: 'space-between',
    marginBottom: 20,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 2,
  },
  subTitleView: {
    padding: 4,
    width: 260,
  },
  delTextView: {
    padding: 4,
    textAlign: 'center',
  },
});

export default App;
